<template>
	<div>
		<div>
			<div class="index-top">
				<el-row type="flex" class="row-bg" justify="space-around">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="left">
								<p class="title">分配量</p>
								今日{{xzke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-renwufenpei"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple1">
							<div class="left">
								<p class="title">需求量</p>
								{{hfke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-xuqiu"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple2">
							<div class="left">
								<p class="title">今日还款数</p>
								{{dfke}}个
							</div>
							<div class="right1"><i class="icon iconfont icon-huankuan"></i></div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple bg-purple3">
							<div class="left">
								<p class="title">今日逾期数</p>
								{{cjke}}个
							</div>
							<div class="right1"><i class="icon iconfont el-icon-time"></i></div>
						</div>
					</el-col>
				</el-row>
			</div>

			<div class="i-eachrt" style="margin-top: 20px;">
				<el-row type="flex" class="row-bg" justify="space-around">
					<el-col :span="12">
						<div class="contens">
							<div id="myChart" :style="{width: '100%', height: '650px'}"></div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="contens">
							<div id="myChart1" :style="{width: '100%', height: '650px'}"></div>
						</div>
					</el-col>
				</el-row>
				<el-row type="flex" class="row-bg" justify="space-around">
					<el-col :span="12">
						<div class="contens">
							<div id="myChart2" :style="{width: '100%', height: '650px'}"></div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="contens">
							<div id="myChart3" :style="{width: '100%', height: '650px'}"></div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import apis from '../../../api/prouserApi'
	export default {
		name: "mains",
		data() {
			return {
				xzke: "", //累计分配量
				hfke: "", //商家累计需求量
				dfke: "", //今日还款数
				cjke: "", //今日到期数
				providerid: '',
				allot: {}, //分配走势图
				needs: {}, //需求走势图
				loan: {}, //放款走趋图
				refund: {}, //还款走趋图
			}
		},
		created() {
			this.$nextTick(function(){
				var topBarHei = $('.index-top').height()
				var hei = ($(window).height()-208-topBarHei)/2
				$('.contens>div').css("height",hei)
			})
			this.providerid = sessionStorage.ProviderID
			this.getprohome()
		},
		methods: {
			
			//获取商家首页
			getprohome() {
				if(this.providerid =='' || this.providerid == undefined || this.providerid== null){
					this.$router.push({
						path: '/'
					})
				}
				this.$axios.get(apis.getprohome + '/' + this.providerid)
					.then(res => {
						if(res.data.isOK) {
							this.xzke = res.data.data.AllotTotal
							this.hfke = res.data.data.DemandTotal
							this.dfke = res.data.data.TodayRefundMoney
							this.cjke = res.data.data.TodayUnRefundMoney
							this.allot = res.data.data.AllotData //分配走势图
							this.needs = res.data.data.DemandData //需求走势图
							this.loan = res.data.data.LoanData //放款走趋图
							this.refund = res.data.data.RefundData //还款走趋图
							this.drawLine()
							this.drawLine1()
							this.drawLine2()
							this.drawLine3()
						} else {
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/'
								})
							} else {
								this.loading = false
								this.$message.error(res.data.msg);
							}
						}
					})
			},
			//分配走势图
			drawLine(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.allot.Data.length;i++){
					proName.push(this.allot.Data[i].Name)	
					proNum.push(this.allot.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart'));

		        myChart.setOption({
		            title: { text: '分配走势图',
		            		x:"center"
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:Math.floor(this.max.apply(proNum)/10)*10+10,
//						maxInterval:(this.max.apply(proNum))/10+1
		            },
		            color: ['#247ba0', '#009afe', '#00eefb', '#f47a52', '#f58253', '#00aafb', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
		            series: [{
		                name: '分配数：'+this.allot.Total,
		                type: 'line',
		                smooth:true,
		                data: proNum,
		                areaStyle: {
		                	opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
			//需求走势图
			drawLine1(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.needs.Data.length;i++){
					proName.push(this.needs.Data[i].Name)	
					proNum.push(this.needs.Data[i].Value)	
				}
		    	
		        let myChart = this.$echarts.init(document.getElementById('myChart1'));

		        myChart.setOption({
		            title: { text: '需求走势图',
		            		x:"center"
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:Math.max.apply(proNum)+10,
		            },
		            color: ['#247ba0', '#009afe', '#00eefb', '#f47a52', '#f58253', '#00aafb', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
		            series: [{
		                name: '需求量：'+this.needs.Total,
		                type: 'line',
		                data: proNum,
		                smooth:true,
		                areaStyle: {
		                	opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
			//放款走趋图
			drawLine2(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.loan.Data.length;i++){
					proName.push(this.loan.Data[i].Name)	
					proNum.push(this.loan.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart2'));

		        myChart.setOption({
		            title: { text: '放款走趋图',
		            		x:"center"
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:this.max.apply(proNum)+10,
		            },
		            color: ['#247ba0', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
		            series: [{
		                name: '放款：'+this.loan.Total,
		                type: 'line',
		                data: proNum,
		                smooth:true,
		                areaStyle: {
		                	opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
			//还款走趋图
			drawLine3(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.refund.Data.length;i++){
					proName.push(this.refund.Data[i].Name)	
					proNum.push(this.refund.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart3'));

		        myChart.setOption({
		            title: { text: '还款走趋图',
		            		x:"center"
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:this.max.apply(proNum)+10,
		            },
		            color: ['#247ba0'],
		            series: [{
		                name: '还款：'+this.refund.Total,
		                type: 'line',
		                smooth:true,
		                data: proNum,
		                areaStyle: {
		                	opacity:"0.1"
		                },
		                lineStyle:{
				            normal:{
				                width:2,  //连线粗细
				                color: "#569ab5"  //连线颜色
				            }
				        },
		            }]
		        });
		    },
		}
	}
</script>
<style>
	.el-row {
		/*margin-bottom: 20px;*/
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
		margin-right: 10px;
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.grid-content {
		border-radius: 4px;
		height: 100%;
	}
	
	.index-top .el-col .bg-purple {
		background: #70c1b3;
		border-radius: 5px;
		border: 1px solid #5eab9e;
	}
	
	.row-bg {}
	
	.i-row .conten {
		padding: 25px 0;
		background: skyblue;
	}
	
	.index-top .el-col {
		height: 80px;
	}
	.index-top .el-col .bg-purple1 {
		background: #b2dbbf;
		border:1px solid #9bc4a8;
	}
	.index-top .el-col .bg-purple2 {
		background: #f3ffbd;
		border:1px solid #deeaa8;
	}
	.index-top .el-col .bg-purple3 {
		background: #eb547c;
		border:1px solid #cf4368
	}
	.index-top .el-col .bg-purple2 .left{
		color: #555c35;
	}
	.index-top .el-col .bg-purple2 .left .title{
		color: #555c35;
	}
	.index-top .el-col .bg-purple2 .right1 .iconfont{
		color: #555c35;
	}
	.left{
		width: 70%;
		float: left;
		box-sizing: border-box;
		padding-left: 30px;
		padding-top: 10px;
		font-size: 14px;
		color: #fff;
	}
	.left .title{
		font-size: 24px;
		color: #fff;
		margin-bottom: 5px;
	}
	.right1{
		width: 30%;
		float: right;
		text-align: center;
		line-height: 80px;
		height: 80px;
		font-size: 36px;
	}
	.right1 .iconfont{
		font-size: 36px;
		color: #fff;
	}
	.contens {
		border: 1px solid #cfdbe2;
		border-top-width: 3px;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		padding-top: 10px;
		/*padding-left: 15px;*/
		margin-bottom: 10px;
	}
</style>